<template>
  <div class="machine-list">
    <h2 class="red">{{itemTitle}}</h2>
    <div class="list-info">
      <li v-for="(key, index) in itemValue">
        <span class="list-index">{{index}}：</span>
        <span class="list-key">{{key}}</span>
      </li>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'machineList',
    data() {
      return {
//        itemName: ['dd', 'ddfdfdf', 'd', 'dfdf'],
//        itemValue: [1,1,2,3324343]
      }
    },
    props: ['itemTitle', 'itemValue'],
    mounted() {
//      console.log(this.itemValue.dataList)
    }
  }
</script>

<style lang="scss" scoped>
  .machine-list {
    min-height: 350px;
    width: 25vw;
    background-color: #fff;
    margin-top: 30px;
    padding: 20px 30px;
    border-radius: 6px;
    /*box-shadow: 0 3px 12px #e0e2e9;*/
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #e6ebf5;
    .red {
      /*color: #f95f35;*/
      color: #72aff7;
      margin: 0 0 18px 0;
      font: bold 18px Helvetica;
    }
    .list-info {
      li {
        margin: 0;
        padding: 7px 0;
        list-style: none;
        display: flex;
        span {
          flex: 1;
        }
      }
      .list-key {
        color: #14142d;
        font: 15px Helvetica;
      }
      .list-index {
        color: #939cad;
        font: 15px Helvetica;
      }
    }
  }
  /*.machine-list:after {*/
    /*display: block;*/
    /*content: '';*/
    /*clear: both;*/
    /*zoom: 1;*/
  /*}*/
</style>
